<template>
  <keep-alive>
    <component :is="currentTabComponent"
               ref="components"
               v-bind="$attrs"
               v-on="$listeners"
               @input="changeComponent" />
  </keep-alive>
</template>

<script>
import TransportComponent from '../corePage/transportComponent/Index.vue'
import CarryComponent from '../corePage/carryComponent/Index.vue'
import LoadComponent from '../corePage/loadComponent/Index.vue'
import DeliverComponent from '../corePage/deliverComponent/Index.vue'
import UnloadComponent from '../corePage/unloadComponent/Index.vue'
import OtherComponent from '../corePage/otherComponent/Index.vue'

export default {
  name: 'RightContent',
  components: {
    TransportComponent,
    CarryComponent,
    LoadComponent,
    DeliverComponent,
    UnloadComponent,
    OtherComponent
  },
  model: {
    prop: 'currentTabComponent',
    event: 'change'
  },
  props: {
    currentTabComponent: {
      type: String,
      default: ''
    }
  },
  methods: {
    changeComponent () {
      this.$emit('change', this.currentTabComponent)
    }
  }
}
</script>

<style scoped>
</style>